Codes

Updated at 2020.11.01 Updated at 2020.10.09

Intro

블레이져에서 컴포넌트는 C#의 클래스와 동일하다. 웹에서 필요한 기능을 모듈화할 수 있는 아주 좋은 수단이다. C#에 익숙하다면 참신한 아이디어로 클래스를 Razor 문법과 결합하여 쉽게 웹을 개발할 수 있게 하였다.

참고 사이트: Blazor University - Components

Basics

• Razor파일 또는 페이지는 컴포넌트(Component)로 사용될 수 있다. 컴포넌트로 사용될 때는 설정된 레이아웃은 무시된다.

• 컴포넌트로 사용하는 방법은 Tag Element처럼 Razor파일에 추가하면 된다. 예를 들어 /Pages/Counter.razor파일은 <Counter/> 또는 <Counter></Counter>를 추가하면 임베디드된 페이지가 나타난다. 아주 강력한 기능이다.

• Counter.razor

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

• Index.razor

@page "/"

<h1>Hello, world!</h1>

<Counter/>

One-way Binding

Counter을 증가시키는 양을 Index.razor에서 입력받기

• Counter.razor에 Parameter추가

@code {
    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    private void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

• Index.razor에서 Counter 컴포넌트의 파라미터 값을 추가하여 호출하기

<Counter IncrementAmount=5 />

Component Events

컴포넌트에서 특정 상황에서 이벤트를 발생시켜 컴포넌트를 호출한 쪽에서 그 이벤트를 받아서 원하는 작업을 수행하기

• Event 발생 시키기: Counter Component(Counter.razor)에서 3의 배수일 때만 Event 발생

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    [Parameter]
    public EventCallback<int> OnMultipleOfThree { get; set; }

    private async Task IncrementCount()
    {
        currentCount++;
        if (currentCount % 3 == 0)
            await OnMultipleOfThree.InvokeAsync(currentCount);
    }
}

• Event를 받아서 처리하기 (3의 배수 값을 출력하기)

Last multiple of three = @LastMultipleOfThree

<Counter OnMultipleOfThree=@UpdateLastMultipleOfThreeValue/>
@code
{
    int LastMultipleOfThree = 0;
    private void UpdateLastMultipleOfThreeValue(int value)
    {
        LastMultipleOfThree = value;
    }
}

Two-way Binding

Remind: One-way Binding

• MyComponent.razor

<div>
    CurrentCounterValue in MyComponent is @CurrentCounterValue
</div>
<button @onclick=UpdateCurrentCounterValue>Update</button>

@code
{
    [Parameter]
    public int CurrentCounterValue { get; set; }

    void UpdateCurrentCounterValue()
    {
        CurrentCounterValue++;
    }
}

• Counter.razor

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<MyComponent CurrentCounterValue=@currentCount />

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Counter.razor에서 Click me 버튼을 클릭하면 CurrentCount와 MyComponent내의 CurrentCounterValue 값이 모두 바뀐다. 하지만 Update 버튼을 클릭하면 MyComponent내의 CurrentCounterValue 값만 바뀐다. 하부 컴포넌트에서 값을 변경할 때 상부 컴포넌트에서도 값이 바뀌게 하려면 어떻게 해야 할까?

Parameter two way binding

파라미터 양방향 바인딩

우선 호출하는 부분을 하기 같이 변경한다.

<MyFirstComponent @bind-CurrentCounterValue=counter />

그리고 MyComponent.razor 파일에 Component Events를 활용하면 쉽게 구현이 가능하다.

• MyComponent.razor를 다음과 같이 변경한다.

<div>
    CurrentCounterValue in MyComponent is @CurrentCounterValue
</div>
<button @onclick=UpdateCurrentCounterValue>Update</button>

@code
{
    [Parameter]
    public int CurrentCounterValue { get; set; }

    [Parameter]
    public EventCallback<int> CurrentCounterValueChanged { get; set; }

    async Task UpdateCurrentCounterValue()
    {
        CurrentCounterValue++;
        await CurrentCounterValueChanged.InvokeAsync(CurrentCounterValue);
    }
}

Most Popular #3

Recent #3